import React,{Component} from 'react';
import HeadBack from '../../components/headBack';
import LazyLoad from 'react-lazyload';
import './style.scss';
import {getItem} from '../../utils/localData';

export default class extends Component {
    constructor(props){
        super(props);
        console.log(props)
        this.state={
          item:getItem(props.match.params.id)
        }
    }
    render(){
        function detailList(img, length) {
            let arr = [];
            for (let i = 0; i < length; i++) {
                arr.push({})
            }
            return arr.map((i, index) => {
                console.log(img)
                const url = img.replace(/(\d*)\.jpg/, '$1' + '-detail' + (index + 1) + '.jpg')
                console.log(url)
                return <div key={index}>
                        <img src={url} alt=""/>
                </div>
            })
        }
        const {history}=this.props;
        console.log();
        return (<div className={'detail'}>
            <HeadBack {...this.props} title={'商品详情'}></HeadBack>
            <div className={'detail_img_wrap'}>
                {this.state.item&&detailList(this.state.item.mainImg, this.state.item.detailLength)}
            </div>
        </div>)
    }
}